<template>
    <div class="adminhousehold">
        <router-view></router-view>
        <div v-if="route.path == '/home/household'">
            <div class="top">
                <Breadcrumbs />
                <h3>住户管理</h3>
                <div class="top-search" style="width: 80%;">
                    <div style="display: flex;align-items: center;">
                        <div class="title">
                            住户类型
                        </div>
                        <el-select placeholder="请选择住户类型" style="width:264px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <div class="title">
                            住户类型
                        </div>
                        <el-select placeholder="请选择住户类型" style="width:264px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </div>
                </div>
                <div class="top-search">
                    <div style="display: flex;align-items: center;">
                        <div class="title">
                            提交日期
                        </div>
                        <el-select placeholder="请选择住户类型" style="width:264px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </div>
                    <div class="dates">
                        <div>今日</div>
                        <div>昨日</div>
                        <div>最近7天</div>
                        <div>最近30天</div>
                    </div>
                    <div class="Btns">
                        <el-button type="primary">查询</el-button>
                        <el-button>重置</el-button>
                        <span style="margin-left: 15px;color: #049fff;cursor: pointer;"
                            @click="flags = !flags">展开</span>
                    </div>
                </div>
                <div v-show="flags">
                    <div class="worksearch-title">
                        <div style="font-size: 14px;display: flex;align-items: center;margin-right: 10px;">
                            精确查找
                        </div>
                        <div style="display: flex;">
                            <el-select placeholder="请选择" style="margin-right: 10px;width: 164px;">
                                <el-option label="住户姓名" value="name" />
                                <el-option label="手机号码" value="phone" />
                                <el-option label="证件号码" value="idcard" />
                            </el-select>
                            <el-input type="text" placeholder="请输入" style="width: 264px;" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="adminhousehold-content">
                <div class="tops">
                    <div>住户列表</div>
                    <div>
                        <el-button type="primary" @click="router.push('/home/workbench/add')">+ 新建</el-button>
                        <el-button>批量操作</el-button>
                    </div>
                </div>
                <div style="display: flex">
                    <div class="left">
                        <div class="title">
                            南航碧桂园小区
                        </div>
                        <div>
                            <el-tree style="max-width: 600px" :data="data" :props="defaultProps"
                                @node-click="handleNodeClick" default-expand-all />
                        </div>
                    </div>
                    <div class="right">
                        <workTables />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumbs from '@/components/Breadcrumb.vue';
import Worksearch from './WorkBench/components/Worksearch.vue';
import workTables from './WorkBench/components/workTables.vue';
import { useRoute,useRouter } from 'vue-router'
import { ref, computed } from 'vue'
const route = useRoute()
const router = useRouter()
let flags = ref(false)
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: any) => {
    console.log(index, row)
}

const tableData: any = [

]
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: 'A座',
        children: [
            {
                label: '1单元',
                children: [
                    {
                        label: '101',
                    },
                    {
                        label: '102',
                    },
                    {
                        label: '201',
                    },
                    {
                        label: '202',
                    },
                    {
                        label: '301',
                    },
                    {
                        label: '302',
                    },
                ],

            },
            {
                label: '2单元',
            },
            {
                label: '3单元',
            }
        ],
    },
    {
        label: 'B座',
        children: [
            {
                label: '1单元',
                children: [
                    {
                        label: '101',
                    },
                ],
            },
        ],
    },
    {
        label: 'C座',
        children: [
            {
                label: '1单元',
                children: [
                    {
                        label: '101',
                    },
                ],
            },
        ],
    },
    {
        label: 'D座',
        children: [
            {
                label: '1单元',
                children: [
                    {
                        label: '101',
                    },
                ],
            },
        ],
    },
    {
        label: 'E座',
        children: [
            {
                label: '1单元',
                children: [
                    {
                        label: '101',
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
</script>

<style scoped>
@import '@/assets/Data/dataadmin.css';
</style>